<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>岗位详情页</title>
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="../../../plugins/element-ui/index.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
    </style>
    <!--轮播走马灯-->
    <style>
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
        .el-carousel__container{
            height: 500px;
        }
    </style>

</head>
<body>
<div id="app">

    <!--1.导航栏-->
    <div style="z-index: 999;position:fixed;width: 100%">
        <el-menu
                class="el-menu-demo"
                mode="horizontal"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1" @click="url(1)" style="margin-left: 200px">首页</el-menu-item>
            <el-menu-item index="3" @click="url(3)">录用结果</el-menu-item>
            <el-menu-item index="4" @click="url(4)">工资详情|反馈信息</el-menu-item>
            <el-menu-item index="5" @click="url(5)">修改个人信息</el-menu-item>

            <el-submenu index="6"  style="margin-left: 400px">
                <template slot="title"><i class="el-icon-user"></i></template>
                <el-menu-item index="6-2" @click="url(6)">退出登录</el-menu-item>
            </el-submenu>


        </el-menu>
    </div>

        <!-- 1.图片-->
        <div>
            <img style="width: auto; height: 2px; border:none;cursor: pointer;"
                 :preview-src-list=" `/files/downloadFile?name=${this.postDate.image}` "
                 :src="getImage(this.postDate.image)"
            />
            <img style=" width: 300px;height: 300px;margin: 80px 0 0 300px" :src="imageUrl1" class="image">

        </div>

        <!-- 2.基本信息-->
        <div style="margin: -305px 0 0 650px;background-color: whitesmoke;border:1px black solid;width: 600px;height: 300px;">
            <div style="margin: 10px 0 0 20px">
                <h2>岗位名：{{this.postDate.jobName}}</h2>
                <h3>工作地址： {{this.postDate.address}}</h3>
                <h3>招聘人数： {{this.postDate.number}}</h3>
                <h3>工作类型： {{this.postDate.jobType}}</h3>
                <h3>薪资：  {{this.postDate.salary}}</h3>

            </div>
        </div>

        <div style="margin:20px 0 0 300px;width: 950px;height: 300px;background-color: whitesmoke;border:1px black solid;">
            <h3>工作要求：  {{this.postDate.jobDetails}}</h3>
        </div>

        <div style="margin: 30px 0 100px 700px">
            <el-button style="width: 100px;height: 50px" type="primary" round @click="application_dialogShow">提交申请</el-button>
        </div>

    <!--申请弹框-->
    <el-dialog title="信息填写" style="height: 650px"  :visible.sync="dialog_add">
        <el-form :model="formData_add" :rules="rules" ref="formData_add" label-width="100px" class="demo-formData_add">

            <el-form-item  label="时间段项：" prop="jobTime">
                <el-select v-model="formData_add.jobTime" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item"
                            :label="item"
                            :value="item">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item  label="联系电话：" prop="phone">
                <el-input v-model="formData_add.phone"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submit">立即申请</el-button>
                <el-button @click="center">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>





    </div>

</div>


<script src="../../../plugins/vue/vue.js"></script>

<!-- 引入element-ui组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>

<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>

<script>
    new Vue({
        el:'#app',    //element
        data:{
            studentInfo:{},
            Query:{
                content:'',
            },

            //岗位信息
            postDate:{},

            //封装提交申请的内容
            formSubmit:{},
            
            postId:'',

            items:{},

            //申请弹框内容
            formData_add:{},
            dialog_add:false,

            options: [],

        },
        created() {
            const studentInfo = window.localStorage.getItem('student')
            if (studentInfo) {
                this.studentInfo = JSON.parse(studentInfo)
            }
            console.log("studentInfo2:::"+studentInfo)

            //获取url传过来的岗位id
            var temData = new URLSearchParams(window.location.search);
            this.postId=temData.get('id')
            console.log(temData.get('id'))

            this.getAll()
        },
        methods:{
            url(code){
                if (code==1){
                    window.location.href='../index.html';
                }else  if (code==2){
                    window.location.href='teleplay.html';
                }else  if (code==3){
                    window.location.href='applicationResult.html';
                }else  if (code==4){
                    window.location.href='salaryDetails.html';
                }else  if (code==5){
                    window.location.href='updateMyself.html';
                }else  if (code==6){
                    localStorage.setItem('student',null)
                    window.location.href='../../Login/StudentLogin.html';
                }
            },

            getAll(){
                //1.获取岗位信息
                axios.get("/posts/getById/"+this.postId).then((res)=>{
                    console.log("res1:")
                    console.log(res)
                    this.postDate=res.data.data
                })
            },

            //申请弹框的显示和隐藏
            application_dialogShow(){

                if (this.studentInfo==null){
                    this.$message.error("请先登录账号在进行申请!")
                }else {
                  //初始化options和formData_add
                  this.formData_add={}
                  this.options=[]

                  this.options.push(this.postDate.jobTime1)
                  this.options.push(this.postDate.jobTime2)
                  this.dialog_add=true

                  console.log("jobtime:")
                  console.log(this.options)
              }
            },

            center() {
                this.dialog_update=false
                this.dialog_add=false
                this.$message.info("取消操作")
                this.getAll()

            },


            //提交申请
            submit(){
                //封装数据
                this.formSubmit.stuNumber=this.studentInfo.data.stuNumber
                this.formSubmit.name=this.studentInfo.data.name
                this.formSubmit.email=this.studentInfo.data.email
                this.formSubmit.resume=this.studentInfo.data.resume
                this.formSubmit.jobName= this.postDate.jobName
                this.formSubmit.postId= this.postDate.id
                this.formSubmit.commercialId= this.postDate.commercialId
                this.formSubmit.salary= this.postDate.salary
                this.formSubmit.jobTime= this.formData_add.jobTime
                this.formSubmit.phone= this.formData_add.phone
                this.formSubmit.statusApplication= 'false'

                console.log("formSubmit::")
                console.log(this.formSubmit)

                this.$confirm("请确认信息填写无误！","提醒",{type: 'info'
                }).then(()=>{
                   axios.post("/postApplications/addPostApplication",this.formSubmit).then((res)=>{
                       if (res.data.code){
                           this.$message.success(res.data.msg)
                       }else{
                           this.$message.error(res.data.msg)

                       }
                   }).finally(()=>{
                       this.dialog_add=false
                   })
                })

            },
            getImage(image) {
                this.imageUrl1= `/files/downloadFile?name=${image}`
            },
        }
    })
</script>
</body>
</html>